<template>
    <!-- This footer should hidden by default and shown when there are todos -->
    <footer class="footer">
        <!-- This should be `0 items left` by default -->
        <span class="todo-count">
            <strong>{{ todoItem.items }}</strong> item left
        </span>
        <!-- Remove this if you don't implement routing -->
        <ul class="filters">
            <li>
                <a class="selected" href="#/" @click="AllTodo">All</a>
            </li>
            <li>
                <a href="#/active" @click="Active">Active</a>
            </li>
            <li>
                <a href="#/completed" @click="Completed">Completed</a>
            </li>
        </ul>
        <!-- Hidden if no completed items are left ↓ -->
        <button class="clear-completed" @click="ClearCompleted">Clear completed</button>
    </footer>
</template>
<script lang="ts" setup>
import axios from 'axios'
import { useMainStore } from '../store/index'
const todoItem = useMainStore()
//全部显示
const AllTodo = async function () {
    var { data } = await axios.get('http://127.0.0.1:8000/todoList')
    todoItem.todoChang(data)
}
//显示未完成的
const Active = function () {
    todoItem.todoList = todoItem.ActiveList.filter((item) => {
        if (item.status == false) {
            return []
        }
    })
}
//显示完成的
const Completed = function () {
    todoItem.todoList = todoItem.Completed.filter((item) => {
        if (item.status) {
            return []
        }
    })
}
//清空已完成的
const ClearCompleted = function () {
    todoItem.todoList=todoItem.todoList.filter((item) => {
        if (item.status) {
            axios.delete('http://127.0.0.1:8000/todoList/' + item.id)
        }
        return !item.status
    })

}

</script>

<style></style>